<template>
  <div id="Logs">
    <!-- 右侧卡片区域 -->
    <!-- 操作列表卡片区 -->
    <el-card class="box-card">
      <!--查询-->
      <el-form :inline="true" :model="logVo" class="demo-form-inline">
        <el-form-item label="操作人">
          <el-input @keyup.enter.native="search" clearable="" @clear="search" v-model="logVo.username"
                    placeholder="操作人"></el-input>
        </el-form-item>
        <el-form-item label="ip地址">
          <el-input @keyup.enter.native="search" clearable="" @clear="search" v-model="logVo.ip"
                    placeholder="ip地址"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button @click="deleteLogs(selected)" :disabled="this.selected.length === 0" class="el-icon-delete">批量
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <template>
        <el-table
          border
          stripe
          :data="LogData"
          style="width: 100%;"
          height="460"
          @selection-change="selectChange">

          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="username" label="操作人" width="150"></el-table-column>
          <el-table-column prop="operation" label="操作" width="150"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="method" label="方法" width="180"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="params" label="参数" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.params }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="time" label="耗时" width="120" sortable="">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.time>=2000" size="mini" type="danger">
                {{scope.row.time+'毫秒'}}
              </el-tag>
              <el-tag v-else-if="scope.row.time>=1000&&scope.row.time<=2000" size="mini">
                {{scope.row.time+'毫秒'}}
              </el-tag>
              <el-tag v-else type="success" size="mini">
                {{scope.row.time+'毫秒'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="操作地点" width="240"></el-table-column>
          <el-table-column prop="ip" label="IP地址" width="160"></el-table-column>
          <el-table-column prop="createTime" label="时间" sortable="" width="180"></el-table-column>

          <el-table-column label="操作" width="100px;" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" icon="el-icon-delete"
                         @click="del(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--分页-->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { findLogPage, deleteLogById, deleteLogsByIds } from '@/api/system/log';

  export default {
    data () {
      return {
        selected: [],//选中的值显示
        LogData: [],
        size: 7,
        total: 100,//总共多少条数据
        current: 1,
        logVo: {
          username: '',
          ip: '',
        },
      }
    },
    created(){
        this.getLogList()
    },
    methods: {
        //加载日志系统列表
        getLogList(){
           findLogPage(this.current,this.size,this.logVo).then(res =>{
               if(res.code === 200){
                    this.total = res.data.total
                    this.LogData = res.data.records
                }
           })
        },
        //搜索
        search(){
            this.current = 1
            this.getLogList()
        },
        //删除系统日志
        async del (id){
            const res = await this.$confirm(
                '此操作将永久删除该系统，是否继续？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).catch(()=>{
                this.$message({
                    type : 'info',
                    message : '已取消删除'
                })
            })

            if(res === 'confirm'){
                const resp = await deleteLogById(id)
                if(resp.code === 200){
                    this.$message.success('系统日志删除成功')
                    this.getLogList()
                }
            }
        },
        //批量删除
        async deleteLogs(){
            const ids = this.selected.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号隔开
            const res = await this.$confirm(
                '此操作将永久删除该系统，是否继续？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).catch(()=>{
                this.$message({
                    type : 'info',
                    message : '已取消删除'
                })
            })

            if(res === 'confirm'){
                const resp = await deleteLogsByIds(ids)
                if(resp.code === 200){
                    this.$message.success('系统日志删除成功')
                    this.getLogList()
                }
            }
        },
        //当每页改条数改变
        handleSizeChange(val){
            this.size = val
            this.getLogList()
        },
        //当前页码改变
        handleCurrentChange(val){
            this.current = val
            this.getLogList()
        },
        //页码选择
        selectChange(sel){
            this.selected = sel
        }

    
    }
  }
</script>
